import React from "react";
import Link from "umi/link";
import queryString from "query-string";
import {Divider} from "antd";

const buildKeyMap = (keys) =>
  keys.reduce((map, k) => {
    map[k] = true;
    return map;
  }, {});

export function renderLinkStatus(v) {
  switch (v) {
    case "START":
      return "启动";
    case "RUNNING":
      return "进行中";
    case "END":
      return "结束";
    default:
      return "";
  }
}

export function renderStatus(cn, v) {
  let color;
  let label;
  switch (v) {
    case "NORMAL":
      label = "正常";
      color = "#4dcb73";
      break;
    case "WARNING":
      label = "预警";
      color = "#ff9121";
      break;
    case "TIMEOUT":
      label = "超时";
      color = "#ff4948";
      break;
    case "END":
      label = "终止";
      color = "#bfbfbf";
      break;
    case "RECALL":
      label = "撤办";
      color = "#bfbfbf";
      break;
    case "PAUSE":
      label = "暂停";
      color = "#608eff";
      break;
    case "ERROR":
    default:
      label = "错误";
      color = "#d91923";
  }
  return (
    <span>
      <span className={cn} style={{ backgroundColor: color }} />
      <span>{label}</span>
    </span>
  );
}

export function getEllipsisCell(cn, v, maxWidth) {
  return (
    <span
      className={cn}
      style={{
        display: "inline-block",
        maxWidth,
      }}
      title={v}
    >
      {v}
    </span>
  );
}

export function getColumns() {
  const columns = [
    /* {
      title: "流程单号",
      dataIndex: "serialNum",
      render: (v) => this.getEllipsisCell(v, 79),
    }, */
    {
      title: "流程实例ID",
      dataIndex: "processInstanceId",
      render: (v) => this.getEllipsisCell(v, 100),
    },
    {
      title: "流程名称",
      dataIndex: "modelName",
      render: (v) => this.getEllipsisCell(v, 80),
    },
    {
      title: "发起人",
      dataIndex: "starterName",
    },
    {
      title: "发起时间",
      dataIndex: "startTime",
      /*
    sorter: (a, b) => {
      if (a && !b) {
        return -1;
      } else if (!a && b) {
        return 1;
      }
      return new Date(a).getTime() - new Date(b).getTime();
    },
    sortDirections: ['descend', 'ascend'],
    */
    },
    {
      title: "结束时间",
      dataIndex: "updateTime",
      render: (text, record) => {
        return (
          <span
            style={{
              display: "inline-block",
            }}
            title={text}
          >
            {record.linkStatus === 'END' ? text : ''}
          </span>
        )
      },
    },
    /*
    {
      title: "任务名称",
      dataIndex: "taskName",
      render: v => this.getEllipsisCell(v, 60),
    }, */
    {
      title: "状态",
      dataIndex: "status",
      render: (v) => this.renderStatus(v),
      /*
      filterMultiple: false,
      filters: [
        { text: "正常", value: "正常" },
        { text: "预警", value: "预警" },
        { text: "超期", value: "超期" },
        { text: "终止", value: "终止" },
        { text: "撤办", value: "撤办" },
        { text: "暂停", value: "暂停" },
        { text: "错误", value: "错误" },
      ],
      onFilter: (value, record) => record.status === value,
      */
    },
    {
      title: "当前任务节点",
      dataIndex: "currentNode",
    },
    {
      title: "当前处理人",
      dataIndex: "operator",
      render: (text) => {
        return (
          <span
            style={{
              display: "inline-block",
              textOverflow: 'ellipsis',
              maxWidth: '110px',
              overflow: 'hidden',
            }}
            title={text}
          >
            {text}
          </span>
        )
      },
    },
    {},
    {
      title: "当前环节",
      dataIndex: "linkStatus",
      render: renderLinkStatus,
      /*
      filterMultiple: false,
      filters: [
        {
          text: "启动",
          value: "start",
        },
        {
          text: "进行中",
          value: "busy",
        },
        {
          text: "结束",
          value: "end",
        },
      ],
      onFilter: (value, record) => record.linkState === value,
      */
    },
    {
      title: "版本",
      dataIndex: "version",
    },
    {
      title: "操作",
      dataIndex: "opration",
      render: (text, record) => {
        const userCode = sessionStorage.getItem("USER_CODE");
        return (
          <div>
            {record.status && record.status === "ERROR" && (
              <>
                <a onClick={(e) => {
                  e.preventDefault();
                  this.handleError(true, record);
                }}
                >
                  查看错误
                </a>
                <Divider type="vertical" />
              </>
            )}

            <Link
              to={{
                pathname: "/flowmonitor/flowlist/detail",
                search: queryString.stringify({
                  processInstanceId: record.processInstanceId,
                  // actype: this.processType,
                }),
              }}
            >
              详情
            </Link>

            {record.linkStatus !== "END" && (
              <>
                <Divider type="vertical" />
                <a onClick={(e) => {
                  e.preventDefault();
                  this.handleSkip(true, record);
                }}
                >
                  强制跳转
                </a>
              </>
              )}
          </div>
        );
      },
    },
  ];
  return columns;
}
//
// 页码页数改变
export function handlePageChange(pageNum, pageSize) {
  this.setState({ page: { pageNum, pageSize } }, () => {
    this.initData();
  });
}

export function getRowSelectionProps(selectedRowKeys) {
  return {
    fixed: true,
    selectedRowKeys,
    onChange: (keys, rows) => {
      const selectedKeyMap = buildKeyMap(keys);
      const prevSelectedKeyMap = this.selectedProcesses.reduce((m, p) => {
        m[p.processInstanceId] = true;
        return m;
      }, {});
      const newRows = rows.filter(
        (p) => !prevSelectedKeyMap[p.processInstanceId],
      );
      this.selectedProcesses = this.selectedProcesses
        .filter((p) => selectedKeyMap[p.processInstanceId])
        .concat(newRows);
      this.setState({ selectedProcessKeys: keys });
    },
  };
}

export function getPageProps(current, pageSize, total) {
  return {
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: ["10", "20", "30", "40"],
    current,
    pageSize,
    total,
    onChange: this.handlePageChange,
    onShowSizeChange: this.handlePageChange,
  };
}
